<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>工具列表 - 家庭工具管理</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FF7EB9',
                        secondary: '#A78BFA',
                        accent: '#FBBF24',
                        success: '#34D399',
                        warning: '#FBBF24',
                        danger: '#F87171',
                        info: '#60A5FA',
                    },
                }
            }
        }
    </script>
</head>
<body class="bg-gray-50 h-full">
    <!-- 页面内容 -->
    <div class="h-full flex flex-col">
        <!-- 顶部栏 -->
        <div class="bg-gradient-to-r from-pink-400 to-purple-500 p-5 text-white">
            <div class="flex justify-between items-center">
                <h1 class="text-xl font-bold">我的工具</h1>
                <div class="flex space-x-2">
                    <button class="w-9 h-9 rounded-full bg-white/20 flex items-center justify-center">
                        <i class="fa fa-filter"></i>
                    </button>
                    <button class="w-9 h-9 rounded-full bg-white/20 flex items-center justify-center">
                        <i class="fa fa-sort"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 搜索和筛选栏 -->
        <div class="px-4 -mt-5 mb-3">
            <div class="bg-white rounded-xl p-3 shadow-sm">
                <div class="search-bar flex items-center bg-gray-100 rounded-lg px-3 py-2 mb-3">
                    <i class="fa fa-search text-gray-400 mr-2"></i>
                    <input type="text" placeholder="搜索工具名称、品牌、位置..." class="bg-transparent w-full outline-none text-sm">
                </div>
                
                <div class="flex items-center space-x-2 overflow-x-auto pb-1">
                    <button class="filter-btn bg-primary text-white px-4 py-1.5 rounded-full text-sm font-medium whitespace-nowrap shadow-sm">全部</button>
                    <button class="filter-btn bg-white text-gray-600 px-4 py-1.5 rounded-full text-sm font-medium whitespace-nowrap shadow-sm">电动工具</button>
                    <button class="filter-btn bg-white text-gray-600 px-4 py-1.5 rounded-full text-sm font-medium whitespace-nowrap shadow-sm">手动工具</button>
                    <button class="filter-btn bg-white text-gray-600 px-4 py-1.5 rounded-full text-sm font-medium whitespace-nowrap shadow-sm">园艺工具</button>
                    <button class="filter-btn bg-white text-gray-600 px-4 py-1.5 rounded-full text-sm font-medium whitespace-nowrap shadow-sm">测量工具</button>
                    <button class="filter-btn bg-white text-gray-600 px-4 py-1.5 rounded-full text-sm font-medium whitespace-nowrap shadow-sm">厨房工具</button>
                </div>
            </div>
        </div>
        
        <!-- 工具列表 -->
        <div class="flex-1 overflow-y-auto">
            <div class="p-4 space-y-3">
                <!-- 电动工具分类 -->
                <div class="mb-4">
                    <h2 class="text-base font-bold text-gray-800 mb-2">电动工具</h2>
                    
                    <div class="tool-card bg-white rounded-2xl p-3 shadow-custom mb-3">
                        <div class="flex items-center">
                            <div class="tool-icon bg-primary/10 text-primary w-10 h-10 rounded-full flex items-center justify-center mr-3">
                                <i class="fa fa-bolt"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex justify-between items-start">
                                    <h3 class="font-medium text-gray-800">电动螺丝刀</h3>
                                    <span class="status-badge bg-green-100 text-green-800">在用</span>
                                </div>
                                <p class="text-xs text-gray-500 mt-1">博世 | 购买于2022-03-15</p>
                                <p class="text-xs text-gray-500 mt-0.5">存放在：车库工具箱</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="tool-card bg-white rounded-2xl p-3 shadow-custom">
                        <div class="flex items-center">
                            <div class="tool-icon bg-amber-100 text-amber-600 w-10 h-10 rounded-full flex items-center justify-center mr-3">
                                <i class="fa fa-wrench"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex justify-between items-start">
                                    <h3 class="font-medium text-gray-800">电钻</h3>
                                    <span class="status-badge bg-amber-100 text-amber-800">需要保养</span>
                                </div>
                                <p class="text-xs text-gray-500 mt-1">牧田 | 购买于2021-11-20</p>
                                <p class="text-xs text-gray-500 mt-0.5">存放在：车库工具箱</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 手动工具分类 -->
                <div class="mb-4">
                    <h2 class="text-base font-bold text-gray-800 mb-2">手动工具</h2>
                    
                    <div class="tool-card bg-white rounded-2xl p-3 shadow-custom mb-3">
                        <div class="flex items-center">
                            <div class="tool-icon bg-blue-100 text-blue-600 w-10 h-10 rounded-full flex items-center justify-center mr-3">
                                <i class="fa fa-cogs"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex justify-between items-start">
                                    <h3 class="font-medium text-gray-800">扳手套装</h3>
                                    <span class="status-badge bg-green-100 text-green-800">在用</span>
                                </div>
                                <p class="text-xs text-gray-500 mt-1">史丹利 | 购买于2022-01-10</p>
                                <p class="text-xs text-gray-500 mt-0.5">存放在：工具箱第一层</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="tool-card bg-white rounded-2xl p-3 shadow-custom">
                        <div class="flex items-center">
                            <div class="tool-icon bg-purple-100 text-purple-600 w-10 h-10 rounded-full flex items-center justify-center mr-3">
                                <i class="fa fa-screwdriver"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex justify-between items-start">
                                    <h3 class="font-medium text-gray-800">螺丝刀套装</h3>
                                    <span class="status-badge bg-green-100 text-green-800">在用</span>
                                </div>
                                <p class="text-xs text-gray-500 mt-1">捷科 | 购买于2022-05-25</p>
                                <p class="text-xs text-gray-500 mt-0.5">存放在：工具箱第二层</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 园艺工具分类 -->
                <div class="mb-4">
                    <h2 class="text-base font-bold text-gray-800 mb-2">园艺工具</h2>
                    
                    <div class="tool-card bg-white rounded-2xl p-3 shadow-custom">
                        <div class="flex items-center">
                            <div class="tool-icon bg-green-100 text-green-600 w-10 h-10 rounded-full flex items-center justify-center mr-3">
                                <i class="fa fa-leaf"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex justify-between items-start">
                                    <h3 class="font-medium text-gray-800">园艺修剪机</h3>
                                    <span class="status-badge bg-red-100 text-red-800">已借出</span>
                                </div>
                                <p class="text-xs text-gray-500 mt-1">本田 | 购买于2021-08-15</p>
                                <p class="text-xs text-gray-500 mt-0.5">借出日期：2023-10-15</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 测量工具分类 -->
                <div class="mb-4">
                    <h2 class="text-base font-bold text-gray-800 mb-2">测量工具</h2>
                    
                    <div class="tool-card bg-white rounded-2xl p-3 shadow-custom">
                        <div class="flex items-center">
                            <div class="tool-icon bg-blue-100 text-blue-600 w-10 h-10 rounded-full flex items-center justify-center mr-3">
                                <i class="fa fa-line-chart"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex justify-between items-start">
                                    <h3 class="font-medium text-gray-800">激光测距仪</h3>
                                    <span class="status-badge bg-green-100 text-green-800">在用</span>
                                </div>
                                <p class="text-xs text-gray-500 mt-1">得伟 | 购买于2022-07-30</p>
                                <p class="text-xs text-gray-500 mt-0.5">存放在：书房抽屉</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 厨房工具分类 -->
                <div class="mb-4">
                    <h2 class="text-base font-bold text-gray-800 mb-2">厨房工具</h2>
                    
                    <div class="tool-card bg-white rounded-2xl p-3 shadow-custom">
                        <div class="flex items-center">
                            <div class="tool-icon bg-purple-100 text-purple-600 w-10 h-10 rounded-full flex items-center justify-center mr-3">
                                <i class="fa fa-cutlery"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex justify-between items-start">
                                    <h3 class="font-medium text-gray-800">厨房多功能刀具</h3>
                                    <span class="status-badge bg-green-100 text-green-800">在用</span>
                                </div>
                                <p class="text-xs text-gray-500 mt-1">双立人 | 购买于2023-01-20</p>
                                <p class="text-xs text-gray-500 mt-0.5">存放在：厨房刀架</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 页面加载完成后的处理
        document.addEventListener('DOMContentLoaded', function() {
            // 添加淡入动画
            const cards = document.querySelectorAll('.tool-card');
            cards.forEach((card, index) => {
                setTimeout(() => {
                    card.classList.add('fade-in');
                }, 50 * index);
            });
            
            // 为工具卡片添加点击事件
            cards.forEach(card => {
                card.addEventListener('click', function() {
                    // 跳转到工具详情页
                    window.parent.navigateTo('tool_detail.html');
                });
            });
            
            // 为分类筛选按钮添加点击事件
            const filterButtons = document.querySelectorAll('.filter-btn');
            filterButtons.forEach(button => {
                button.addEventListener('click', function() {
                    // 移除所有按钮的选中状态
                    filterButtons.forEach(btn => {
                        btn.classList.remove('bg-primary', 'text-white');
                        btn.classList.add('bg-gray-100', 'text-gray-600');
                    });
                    
                    // 设置当前按钮为选中状态
                    this.classList.remove('bg-gray-100', 'text-gray-600');
                    this.classList.add('bg-primary', 'text-white');
                    
                    // 这里可以添加筛选逻辑
                });
            });
            
            // 为筛选图标按钮添加点击事件
            document.querySelector('.fa-filter').parentElement.addEventListener('click', function() {
                // 打开高级筛选面板
                alert('打开高级筛选面板');
            });
        });
    </script>
</body>
</html>